<template>
  <div>
    <img class="logo" src="@/assets/logo.png" />
    <div class="loginFrame">
      <div class="login_title">
        <span>祥生建设台账系统</span>
      </div>
      <div class="login_fields">
        <div class="login_fields__user" style="margin-top: 15px">
          <div class="icon">
            <img alt="" src="@/assets/img/user_icon_copy.png" />
          </div>
          <Tooltip
            content="大写键已打开!"
            placement="right-end"
            :disabled="capsTooltip"
          />
          <Input
            v-model="loginForm.username"
            name="username"
            placeholder="用户名"
            autocomplete="off"
            clearable
            tabindex="1"
            @keyup.native="checkCapslock"
          />
        </div>
        <div class="login_fields__password" style="margin-top: 15px">
          <div class="icon">
            <img alt="" src="@/assets/img/lock_icon_copy.png" />
          </div>
          <Tooltip
            content="大写键已打开!"
            placement="right-end"
            :disabled="capsTooltip"
          />
            <Input
              v-model="loginForm.password"
              name="password"
              type="password"
              password
              placeholder="密码"
              autocomplete="off"
              clearable
              tabindex="2"
              @keyup.native="checkCapslock"
            />
          </Tooltip>
        </div>
      </div>
      <div class="login_fields__submit">
        <Button
          type="primary"
          class="login_fields__submit"
          @click.native.prevent="handleLogin"
          >登录</Button
        >
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/styles.css";
import { getToken, setToken } from "@/store/localStorage/cookies";
import { LoginSystem } from "@/axios/authorize.js";

export default {
  name: "Login",

  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      passwordType: "password",
      capsTooltip: true,
      loading: false,
      showDialog: false,
      redirect: undefined,
    };
  },
  /* watch: {
	  'loginForm.username'(value){
		  this.checkCapslock(value);
	  }
  }, */
  /* mounted: function(){

  }, */
  methods: {
    checkCapslock(e) {
      const { key } = e;
      var judge = key && key.length === 1 && key >= "A" && key <= "Z";
      if (judge) {
        this.capsTooltip = false;
        //this.showtips = true;
      } else {
        this.capsTooltip = true;
        //this.showtips = false;
      }
    },
    handleLogin() {
      this.$Loading.start();
      LoginSystem(this.loginForm)
        .then((res) => {
          setToken(res);
          if (getToken()) {
            this.$router.push({ path: this.redirect || "/" });
            this.$Loading.finish();
          }
          else{
            this.$Notice.error({
              title: "登录失败",
              desc: "账户或密码错误！",
            });
            this.$Loading.finish();
          }
        })
        .catch(err => {
          console.log('>>>>>>>>>>>>>错误！',err)
          this.$Notice.error({
            title: "登录失败",
            desc: "账户或密码错误！",
          });
          this.$Loading.finish();
        });
    },
  },
};
</script>

<style lang="scss">
  .logo {
    position: absolute;
    left: 120px;
    top: 80px;
    width: 270px;
  }
</style>
